<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue基本用法</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <!--<script>-->
        <!--window.onload = function () {-->
           <!--new Vue({-->
                <!--el: "#d1", //指定关联的表示,相当于指定了Vue的作用域-->
                <!--data: {msg: "Hello World"} // 数据仓库-->
            <!--})-->
        <!--}-->
    <!--</script>-->
</head>
<body>
<div id="d1">
    <!--
        使用Vue提供的插值表达式进行数据的展示
        表达式格式为:{{ 表达式内容 }}
    -->
    <span id="s1">{{msg}}</span><br/>
    <!--
        使用Vue指定进行数据的展示
        v-model指定专门用于双向数据绑定
    -->
    <input type="text" id="inText" v-model="msg">
</div>
<div id="d2">
    <span id="s2"></span><br/>
    <input type="text" id="inText2">
</div>
<script>
    new Vue({
        el: "#d1", //指定关联的表示,相当于指定了Vue的作用域
        data: {msg: "Hello World"} // 数据仓库
    });
</script>
</body>
</html>